<template>
  <div class="import">
    <input
      :type="eyes?types:type"
      :placeholder="test"
      v-model="text"
      :class="{ err: !flag, errs: flags }"
      maxlength="11"
    />
    <div class="icon">
      <span class="red" v-if="!flag">
        <van-icon name="cross" size="4vw" v-if="xs" @click="xBtn" />
        <van-icon
          name="eye-o"
          size="4vw"
          @mousedown="eye"
          @mouseup="up"
          v-if="eyes"
          color="limegreen"
        />
      </span>
      <span class="limg" v-if="flags">
        <van-icon name="success" size="4vw" v-if="xs" @click="xBtn" />
        <van-icon
          name="eye-o"
          size="4vw"
          @mousedown="eye"
          @mouseup="up"
          @touchstart="eyeS"
          @touchend="upS"
          v-if="eyes"
          color="limegreen"
        />
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["test", "runer", "type", "errage"],
  data() {
    return {
      xs: false,
      eyes: false,
      text: "",
      flag: true,
      flags: false,
      types: ""
    };
  },
  watch: {
    text() {
      this.types = this.type;
      this.xs = true;
      const ronter = new RegExp(this.runer);
      this.flag = ronter.test(this.text);
      this.flags = this.flag;
      if (this.text == "") {
        this.xs = false;
        // this.eyes = false;
        this.flag = true;
        this.flags = false;
      }
      if (this.type == "password") {
        this.eyes = true;
      }
      if (this.type == "password" && this.text == "") {
        this.eyes = false;
      }
      // console.log(this.type);
      this.$emit("InputBtn", this.text);

      //   下面代码根据内容自定义输入框宽度
      // 前提要加行内样式
      //   1
      // ref="ws"
      //   :style="{width:width+'px'
      //   }"
      //   还要加数据在data里面
      // 2
      // width: ""
      // 监控判断
      // 3
      //   this.width = 100 + this.text.length * 2;
      //   console.log(this.width);
      //   console.log(this.$refs.ws.style.width);
    }
  },
  methods: {
    xBtn() {
      this.text = "";
    },
    eye() {
      this.types = "text";
    },
    up() {
      this.types = "password";
    },
    eyeS() {
      this.types = "text";
    },
    upS() {
      this.types = "password";
    }
  },
  mounted() {
    if (localStorage.getItem("username") && localStorage.getItem("password")) {
      if (this.type == "text" && this.test == "登录账号") {
        this.text = localStorage.getItem("username");
      }

      if (this.type == "password" && this.test == "登录密码") {
        this.text = localStorage.getItem("password");
      }
    }
  }
};
</script>

<style lang="less" scoped>
span {
  display: inline-block;
  margin-top: 5px;
  font-size: 12px;
}
.red {
  color: red;
}
.limg {
  color: limegreen;
}
.import {
  margin: 10px;
  text-align: center;
  position: relative;
  .err {
    border: 1.001px red solid;
  }
  .errs {
    border: 1.001px limegreen solid;
  }
  input {
    text-overflow: ellipsis;
    text-align: center;
    box-sizing: border-box;

    border: 1px #eee solid;
    border-radius: 10.001px;
    background-color: rgba(255, 255, 255);

    // border-bottom: solid 1.001px;
    outline: none;
    width: 180.001px;
    height: 36px;
    transition: width 0.5s;
    padding: 6.998px;
    font-size: 3.333vw;
  }
  input:focus {
    width: 200.002px;
    height: 40px;
    font-size: 15px;
    font-weight: 700;
    color: black;
  }
  .icon {
    margin: 2px 0 0 0;
    /deep/ .van-icon {
      padding: 0 1.944vw;
    }
  }
}
</style>
